<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>防抖</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js"></script>
</head>

<body>
  <button id="myButton">点击</button>
  <script>
    // _.debounce(func, [wait=0], [options=])
    // func (Function): 要防抖动的函数。函数会从上一次被调用之后，延迟规定时间在调用
    // 如果延迟的时间内触发了多次请求，那么只有最后一次会生效
    // [wait=0] (number): 需要延迟的毫秒数。
    // [options=] (Object): 选项对象。
    // [options.leading=false] (boolean): 指定在延迟开始前调用。
    // [options.maxWait] (number): 设置 func 允许被延迟的最大值。
    // [options.trailing=true] (boolean): 指定在延迟结束后调用。
    const button = document.getElementById('myButton');
    let count = 0;
    // 参数为3，就是不能超过3次，也就是只有两次机会，他只会调用两次
    let test = () => { console.log('测试防抖'); }
    let debounced = _.debounce(test, 1000)
    button.addEventListener('click', debounced);
  </script>
</body>

</html>